<template>
  <el-dialog title="编辑小节" :visible.sync="isShow" @close="close">
    <el-form :model="model" :inline="true" class="demo-form-inline">
      <el-form-item label="章节名称：" :label-width="'100px'">
        <el-input v-model="model.resourceName" autocomplete="on" placeholder="请输入章节名称"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="getList">搜索</el-button>
    </div>
    <el-tabs type="border-card">
      <el-tab-pane v-for="d in cateList" :key="d.key" :label="d.text">
        <el-table
          ref="multipleTable"
          :data="list"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange">
          <el-table-column
            type="selection"
            width="55">
          </el-table-column>
          <el-table-column
            prop="face"
            label="封面"
            width="120">
            <template slot-scope="scope">
              <img :src="scope.row.face" width="40" height="40" class="head_pic"/>
            </template>
          </el-table-column>
          <el-table-column
            prop="resourceName"
            label="素材名称"
            show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">{{$t('action.cancel')}}</el-button>
      <el-button type="primary" @click="close(multipleSelection)">{{$t('action.comfirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {mapState} from "vuex";

  export default {
    name: "AddSection",
    props: [],
    data() {
      return {
        isShow: true,
        multipleSelection: null,
        model: {
          resourceCateId: null,
          resourceName: "",
        },
        list: []
      }
    },
    computed: {
      ...mapState({
        cateList: state => state.app.enumData.resourceType_map
      })
    },
    created() {
      this.getList();
    },
    methods: {
      getList() {
        this.$api.resource.getResourceList().then(
          res => {
            this.list = res.data.list
          }
        )
      },
      handleSelectionChange(val) {
        console.log(val)
        this.multipleSelection = val;
      },
      close(data) {
        this.$emit("closePop", data)
      },
    }
  }
</script>

<style scoped>

</style>
